import React from 'react';
import Card from '../../../components/card';
import Image from 'components/image';
import './goodsImage.scss';

interface GoodsImageCardProps {
    url: string;
    context: string;
}

class GoodsImageCard extends React.Component<GoodsImageCardProps> {
    cardInfo: {width: string, title: string}
    constructor (props: GoodsImageCardProps) {
        super(props);
        this.cardInfo = {
            width: '10%',
            title: '商品图片',
        };
    }
    /**
     * @function copyImage 复制图片
     */
    async copyImage () {
        const { clipboard } = navigator;
        const { url } = this.props;
        const imageData = await fetch(url);
        const blob = await imageData.blob();
        const clipboardItem = new ClipboardItem({ [blob.type]: blob });
        clipboard.write([clipboardItem]);
    }

    render () {
        const { url, context } = this.props;
        const { width, title } = this.cardInfo;
        const popoverElement: JSX.Element = (<div className='popover-context'>
            <div className='popover-image'>
                <img src={url} width="260" height="260" />
            </div>
            <div className='popover-copy-button'>
                <button className='copy' onClick={this.copyImage.bind(this)}>复制图片</button>
            </div>
            <div className='context-label'>{context}</div>
        </div>);

        return (<Card title={title} width={width}>
            {<Image usePopover={true} url={url} popoverElement={popoverElement} width={60} height={60} />}
        </Card>);
    }
}

export default GoodsImageCard;
